<template>
  <div>
    <el-tree-select
      v-model="selectedValue"
      :data="orgOptions"
      :default-expand-all="true"
      :filter-node-method="filterNodeMethod"
      :render-after-expand="false"
      check-strictly
      filterable
      placeholder="选择机构"
      style="width: 160px"
      @node-click="orgNodeClick"
    />
  </div>
</template>

<script lang="ts" setup>
import { listSysOrg } from "@/api/system/sysOrg";

const { proxy } = getCurrentInstance() as any;

let emits = defineEmits(["orgNodeClick", "getTreeSelect"]);
// 下拉框机构树
let orgOptions = ref([]);
const props = defineProps({
  value: {
    type: String,
    default: "",
  },
});

/** 检索过滤 */
const filterNodeMethod = (value, data) => data.label.includes(value);
// 选中值
let selectedValue = ref(props.value);

onMounted(() => {
  getTreeSelect();
});

function orgNodeClick(data, _e) {
  emits("orgNodeClick", data);
}

/** 查询机构下拉树结构 */
function getTreeSelect() {
  listSysOrg({ status: "0" }).then((response) => {
    orgOptions.value = proxy.$handleTree(response.data, "orgId", "orgName");
    emits("getTreeSelect", response);
  });
}
</script>

<script lang="ts">
export default {
  name: "orgTree",
};
</script>

<style scoped></style>
